import styled from 'styled-components'

// ListNavTop 的样式
export const TopDiv = styled.div`
    height:.4rem;
    ul{
        display:flex;
        flex-direction:row-gap;
        li{
            flex:1;
            line-height:.4rem;
            text-align:center;
            font-size:.13rem;
            color:#333333;
        }
        .active{
            color:#FF4338;
            position:relative;
            span{
                display:block;
                position:absolute;
                width:.16rem;
                height:100%;
                border-bottom:.02rem solid #FF4338;
                top:0;
                left:.29rem;
            }
        }
    }

`

// ListNavDown 的样式
export const DownDiv = styled.div`
    ul{
        padding-top:.1rem;
        padding-bottom:.2rem;
        height:.56rem;
        display:flex;
        flex-direction:row;
        justify-content:space-evenly;
        li{
            width:.75rem;
            background-color:#f5f5f5;
            text-align:center;
            line-height:.26rem;
        }
        .active{
            background-color:#FF4338;
            color:#ffffff;
        }
    }

`

// ui\ListView\ListItem\Item.jsx 的样式（渲染ListView的每一项数据
export const ListStyled = styled.div`

    a {
        margin-left: 0.1rem;
        display: flex;
        padding: 0.1rem 0.1rem 0.1rem 0;
        width: 3.65rem;
        min-height: 1.33rem;
        border-bottom: 1px solid #e6e6e6;

        &:first-child {
            border_1px(1px 0 1px 0, #e6e6e6);
        }

        &>div:first-child {
            span {
                width: 1.07rem;
                height: 100%;

                img {
                    width: 1.07rem;
                    /* width:100%; */
                    height: 100%;
                }
            }
        }

        .test {
            flex: 1;
            width: 2.58rem;
            /* height: 1.12rem; */
            padding: 0.1rem;
            font-size: 0.14rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            h1 {
                color: #333;
                font-weight: 400;
                overflow: hidden;
                word-break: break-all;
                line-height: 0.56rem;
                line-height: 1em;
            }

            > p {
                color: #666666;
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden; 
                text-overflow: ellipsis; 
                display: -webkit-box; 
                -webkit-line-clamp: 2; 
                line-clamp: 2; 
                -webkit-box-orient: vertical;

                img {
                    width: 0.09rem;
                    height: 0.09rem;
                }
            }

            div {
                color: #999;

                span {
                    color: #FF4338;
                }
            }
        }

    }
`



